<template>
    <div id="lib-setting-box">
        <!-- 用户名 密码  备份 导入 导出  存储路径 -->
        <div class="lib-setting-item">
            <h4>验证</h4>
            <table border="0" cellspacing="20">
                <tr>
                    <td align="left">用户名&nbsp;:</td>
                    <td align="center"><el-input class="lib-setting-item-input" size="small"></el-input></td>
                </tr>
                <tr>
                    <td align="left">密码&nbsp;:</td>
                    <td align="center"><el-input class="lib-setting-item-input" size="small"></el-input></td>
                </tr>
                <tr>
                    <td align="left"></td>
                    <td align="center">
                        <el-button @click="submitAccount" size="small">提交</el-button>
                        <el-button @click="reset" size="small">重置</el-button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="lib-setting-item">
            <h4>备份</h4>
            <div class="lib-setting-item-button-group">
                <el-button @click="importStore" size="small">
                    导入
                </el-button>
                <el-button @click="exportStore(false)" size="small">
                    备份
                </el-button>
                <el-button @click="exportStore(true)" size="small">
                    备份到
                </el-button>
            </div>
        </div>
        <div class="lib-setting-item">
            <h4>数据</h4>
            <div class="lib-setting-item-button-group">
                <el-button @click="initStore" size="small">
                    初始化数据库
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { StoreCopy } from '@/views/index.js'
import { mapMutations, mapActions } from "vuex"
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
    methods: {
        ...mapActions(['aspect']),
        ...mapMutations(['aspectSync', 'allClear', 'clear']),
        importStore() {
            this.aspect(async () => {
                const result = await $Render.getStoreCopy()
                if (result.state === 1) {
                    const storeCopy = JSON.parse(result.value)
                    let total = 0
                    for (const table of $MyLibDbc.tables) {
                        const val = await $MyLibDbc[table.name].count()
                        total += val
                    }
                    const tip = `当前数据库有${total}条记录,待导入文件有${storeCopy.fileList.length +
                        storeCopy.indexList.length +
                        storeCopy.favoriteList.length +
                        storeCopy.tagList.length +
                        storeCopy.indexTagRelationshipList.length +
                        storeCopy.indexFileRelationshipList.length +
                        storeCopy.indexCoverRelationshipList.length +
                        storeCopy.indexSubindexRelationshipList.length
                        }条记录,此操作将删除当前数据库,若未备份建议先导出备份!`
                    ElMessageBox.confirm(tip, '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        await $MyLibDbc.resetDB()
                        await $MyLibDbc.file.batchInsert(storeCopy.fileList)
                        await $MyLibDbc.index.batchInsert(storeCopy.indexList)
                        await $MyLibDbc.favorite.batchInsert(storeCopy.favoriteList)
                        await $MyLibDbc.tag.batchInsert(storeCopy.tagList)
                        await $MyLibDbc.index_tag_relationship.batchInsert(storeCopy.indexTagRelationshipList)
                        await $MyLibDbc.index_file_relationship.batchInsert(storeCopy.indexFileRelationshipList)
                        await $MyLibDbc.index_cover_relationship.batchInsert(storeCopy.indexCoverRelationshipList)
                        await $MyLibDbc.index_subindex_relationship.batchInsert(storeCopy.indexSubindexRelationshipList)
                        ElMessage({
                            type: 'success',
                            message: '导入成功!'
                        })
                    }).catch(() =>
                        ElMessage({
                            type: 'info',
                            message: '取消导入!',
                        })
                    );
                } else if (result.state === 2)
                    ElMessage({
                        type: 'info',
                        message: '取消导入!',
                    })
                else
                    throw result.value
            })
        },
        exportStore(as) {
            this.aspect(async () => {
                const storeCopy = new StoreCopy()

                storeCopy.fileList = await $MyLibDbc.file.getAll()
                storeCopy.indexList = await $MyLibDbc.index.getAll()
                storeCopy.favoriteList = await $MyLibDbc.favorite.getAll()
                storeCopy.tagList = await $MyLibDbc.tag.getAll()
                storeCopy.indexTagRelationshipList = await $MyLibDbc.index_tag_relationship.getAll()
                storeCopy.indexFileRelationshipList = await $MyLibDbc.index_file_relationship.getAll()
                storeCopy.indexCoverRelationshipList = await $MyLibDbc.index_cover_relationship.getAll()
                storeCopy.indexSubindexRelationshipList = await $MyLibDbc.index_subindex_relationship.getAll()
                const result = as ? await $Render.exportStoreAs(storeCopy) : await $Render.exportStore(storeCopy)
                if (result.state === 1)
                    ElMessage({
                        type: 'success',
                        message: '导出成功!'
                    });
                else if (result.state === 2)
                    ElMessage({
                        type: 'info',
                        message: '取消导出!'
                    });
                else {
                    ElMessage({
                        type: 'warning',
                        message: '导出出错!'
                    });
                    throw result.value
                }
            })
        },
        submitAccount() {
            this.aspect(async () => {
                const result = await $Render.putAccount(this.username, this.password)
                if (result.state === 1)
                    ElMessage({
                        type: 'success',
                        message: '修改账号/密码成功!'
                    });
                else
                    throw result.value
            })
        },
        initStore() {
            this.aspect(async () => {
                try {
                    await this.$confirm('此操作会清空所有记录!', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                    await $MyLibDbc.resetDB()
                    ElMessage({
                        type: 'success',
                        message: '初始化数据库成功!'
                    });
                } catch (error) {
                    if (error === 'cancel')
                        ElMessage({
                            type: 'info',
                            message: '取消初始化!'
                        })
                    else
                        throw error
                }
            })
        },
        reset() {
            this.username = ''
            this.password = ''
            //test

            this.aspectSync(() => {
                throw Error('Test测试!')
            })
        }
    },
    data() {
        return {
            username: '',
            password: '',
        }
    }
}
</script>

<style>
#lib-setting-box {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    overflow: scroll;
    background-color: #1E1E1E;
}

.lib-setting-item {
    width: 100%;
}

.lib-setting-item h4 {
    margin-left: 40px;
    margin-bottom: 0;
    margin-top: 0;
    text-align: left;
}

.lib-setting-item table {
    margin-left: 70px;
    margin-right: auto;
}

.lib-setting-item-input {
    width: 300px !important;
}

.lib-setting-item-button-group {
    display: flex;
    justify-content: flex-start;
    padding-left: 90px;
}
</style>